<template>
    <div>
        <!--职位导航 这边可以拆成一个组件-->
        <div class="job-nav-container">
            <el-menu :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
            >
                <el-menu-item  index="1">所有职位</el-menu-item>
                <el-menu-item  index="2">紧急招聘</el-menu-item>
            </el-menu>
        </div>

        <!--职位信息  可以拆成一个组件-->
        <div class="recruitment-info-container">

            <!--职位招聘信息栏目-->
            <div class="recruitment-left-div">
                <!--职位招聘信息-->
                <!--展示所有的职位信息-->
                <ul v-if="isUrgencyStatus === 0">
                    <li v-for="itemCompany in companyNotIsUrgencyListData">
                        <h4 style="margin-left: 10px;margin-top: 20px">{{itemCompany.workJobName}}</h4>
                        <span class="company_position">{{itemCompany.companyName}}</span>
                        <span class="daytime_position">{{itemCompany.dayLong}}天前</span>
                        <span>
                            <span style="color: #FF7011;font-weight: bold;font-size: 18px;margin-left: 10px">{{itemCompany.salaryStart}} - {{itemCompany.salaryEnd}} &nbsp;</span>
                            <span style="font-size: 13px;color: #999999">{{itemCompany.proviceName}}/{{itemCompany.cityesName}}/{{itemCompany.areasName}}</span>
                            <span style="margin-left: 20px;font-size: 13px;color: #999999">{{itemCompany.educationName}} | 经验不限</span>
                        </span>
                        <span class="apply_btn_position">
                            <el-button type="primary" size="medium"
                            @click="deliver('workjobs:workjob:deliver',itemCompany)"
                            >职位申请</el-button>
                        </span>
                        <span class="scale_position">
                            {{itemCompany.companyNature}} | {{itemCompany.workJobTypeName}}
                        </span>
                    </li>
                </ul>

                <!--只展示紧急招聘的职位-->
                <ul v-else-if="isUrgencyStatus === 1">
                    <li v-for="itemCompany in companyIsUrgencyListDataT">
                        <h4 style="margin-left: 10px;margin-top: 20px">{{itemCompany.workJobName}}</h4>
                        <span class="company_position">{{itemCompany.companyName}}</span>
                        <span class="daytime_position">{{itemCompany.dayLong}}天前</span>
                        <span>
                            <span style="color: #FF7011;font-weight: bold;font-size: 18px;margin-left: 10px">{{itemCompany.salaryStart}} - {{itemCompany.salaryEnd}} &nbsp;</span>
                            <span style="font-size: 13px;color: #999999">{{itemCompany.proviceName}}/{{itemCompany.cityesName}}/{{itemCompany.areasName}}</span>
                            <span style="margin-left: 20px;font-size: 13px;color: #999999">{{itemCompany.educationName}} | 经验不限</span>
                        </span>
                        <span class="apply_btn_position">
                            <el-button type="primary" size="medium"
                                       @click="deliver('workjobs:workjob:deliver',itemCompany)"
                            >职位申请</el-button>
                        </span>
                        <span class="scale_position">
                            {{itemCompany.companyNature}} | {{itemCompany.workJobTypeName}}
                        </span>
                    </li>
                </ul>
                <!--分页条-->
                <div class="page-cut">
                    <div class="block">
                        <el-pagination
                                @size-chanage="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="current"
                                :page-size="pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total=total>
                        </el-pagination>
                    </div>
                </div>
            </div>
            <!--推荐职位-->
            <div class="recruitment-right-div clearfix">
                <!--还没想好写点啥-->
                <div class="recruitment-img-box">
                    <img style="width: 395px;height: 300px" src="../../../assets/job_icon.jpg" alt="简历曝光度">
                </div>
                <!--推荐职位的信息-->
                <div class="recommend-job-info-box">
                    <div class="recommend-position-title">
                       <!-- 推荐职位-->
                        紧急招聘
                    </div>
                    <!--推荐职位信息的容器-->
                    <div class="recommend-position-info-box">
                        <div v-for="itemCompany in companyIsUrgencyListData" class="position-recommend-info">
                            <span style="display:block;">
                                <span style="color: rgba(252,85,49,0.7)">急</span> {{itemCompany.workJobName}}
                            </span>
                            <span style="display:block;font-size: 14px;color: #C0C4CC;margin-top: 15px">
                               {{itemCompany.companyName}}
                            </span>
                            <span style="display:block;color: #FF7011;font-size: 14px;margin-top: 15px">
                                 {{itemCompany.salaryStart}} - {{itemCompany.salaryEnd}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import workjobApi from "@/api/workjobs/workjobApi";
    import {isAuth} from "@/utils";

    export default {

        inject:['recruitmentReload'],
        //inject:['reload'],
        name: "recruiment-common",
        //props:["queryCondition"],
        props:{
            queryCondition: Object,
        },
        data(){
            return{
                isUrgencyStatus:0,
                activeIndex:"1",
                current:1,
                pageSize:5,
                total:0,
                companyIsUrgencyListDataT:[],
                companyNotIsUrgencyListData:[],
                companyIsUrgencyListData:[],

                // queryCondition:{
                //     workJobWalfare:undefined,               //职位福利
                //
                //     provincesId:undefined,                  //省份Id
                //     cityesId:undefined,                     //城市Id
                //     areasId:undefined,                      //地区Id
                //
                //     startSalary:undefined,                  //薪资起始
                //     endSalary:undefined,                    //薪资结束
                //
                //     tradeId:undefined,                      //tradeId
                //     classifyId:undefined,                   //classifyId
                //     jobTypeId:undefined,                    //areasId
                // },
            }
        },
        mounted() {
            console.log("this.$route.query ===>> ",this.$route.query.pageDataCompanyNotIsUrgency)
            console.log("this.$route.query.pageDataCompanyNotIsUrgencyTotal ===>> ",this.$route.query.pageDataCompanyNotIsUrgencyTotal)
            console.log("this.$route.query.queryCondition ===>>",this.$route.query.conditionQuery)
            //debugger
            if (JSON.stringify(this.$route.query) == '{}'){
                console.log("111")
                this.loadingWorkJob()
            }else{
                console.log("222")
                this.getQuery()
            }
        },
        computed:{
        },

        updated() {
        },
        methods:{
            getQuery(){
                this.$nextTick(function () {
                    this.companyNotIsUrgencyListData = JSON.parse(this.$route.query.pageDataCompanyNotIsUrgency)
                    this.total = parseInt(this.$route.query.pageDataCompanyNotIsUrgencyTotal)
                    //console.log(" this.companyIsUrgencyListDataT132456 789===> ",this.companyIsUrgencyListDataT)
                })
                //console.log(" this.companyIsUrgencyListDataT132456 ===> ",this.companyIsUrgencyListDataT)
            },
            /*紧急招聘的岗位*/
            loadingWorkJobUrgency(){
                workjobApi.showPostion(this.current,this.pageSize,this.queryCondition)
                .then(data => {
                    this.companyIsUrgencyListDataT = data.data.pageDataCompanyIsUrgency
                    this.total = data.data.pageDataCompanyIsUrgencyTotal
                    this.companyIsUrgencyListData = data.data.pageDataCompanyIsUrgency.slice(0,4)
                })
            },
            /*非紧急招聘的岗位 All*/
            loadingWorkJob(){
                workjobApi.showPostion(this.current,this.pageSize,this.queryCondition)
                    .then(data => {
                        console.log("data loadingWorkJob===>>> ",data)
                        if(data && data.data.code === 0){
                                console.log("datapageDataHeadHuntingIsUrgency ===>",data)
                                this.companyNotIsUrgencyListData = data.data.pageDataCompanyNotIsUrgency
                                this.total = data.data.pageDataCompanyNotIsUrgencyTotal
                                this.companyIsUrgencyListData = data.data.pageDataCompanyIsUrgency.splice(0,4)
                        }
                    })
                    .catch(error => {
                        Promise.reject(error)
                    })
            },

            //投递功能
            deliver(value,object){
                console.log("this object ==>",object)
                const token = this.$cookie.get('client_token')
                if (!token){
                    this.$message({
                        type:'warning',
                        message:'您好，请先登录！！！'
                    })
                    return;
                }
                const isAuths = isAuth(value)
                if (!isAuths){
                    this.$message({
                        type:'warning',
                        message:'抱歉,请使用求职者用户操作'
                    })
                    return
                }else{
                    //权限足够 执行下面的操作
                    this.$confirm('确认投递'+ object.workJobName +'该职位?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const userId = JSON.parse(localStorage.getItem("user")).userId

                        workjobApi.deliver(object.workJobId,userId)
                            .then(data => {
                                if (data.data.code === 0){
                                    if (data.data.data === true){
                                        this.$message({
                                            type:'success',
                                            message:'职位投递成功'
                                        })
                                    }
                                }else if (data.data.code === 500){

                                    this.$message({
                                        type:'warning',
                                        message:data.data.msg
                                    })
                                }
                            })
                            .catch(err => {
                                Promise.reject(err)
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消投递'
                        });
                    });
                }
            },
            /*当前也发生改变的时候触发*/
            handleCurrentChange(value){
                this.current = value
                if (JSON.stringify(this.$route.query) == '{}'){
                    this.loadingWorkJob()
                }else{
                    console.log("this.$route.query.queryCondition",this.$route.query.conditionQuery);
                    workjobApi.showPostion(value,this.pageSize,JSON.parse(this.$route.query.conditionQuery))
                    .then(data => {
                        if(data && data.data.code === 0){
                            //console.log("datapageDataHeadHuntingIsUrgency ===>",data)
                            this.companyNotIsUrgencyListData = data.data.pageDataCompanyNotIsUrgency
                            this.total = data.data.pageDataCompanyNotIsUrgencyTotal
                            this.companyIsUrgencyListData = data.data.pageDataCompanyIsUrgency.splice(0,4)
                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })
                }

            },
            handleSizeChange(){

            },
            //菜单导航发生变化的时候触发,
            handleSelect(key,keyPath){
                if (key == 1){
                    this.isUrgencyStatus = 0;
                    this.loadingWorkJob()
                }else if (key == 2){
                    this.isUrgencyStatus = 1
                    this.loadingWorkJobUrgency()
                }
            }
        },
        watch:{
            queryCondition:{
                handler(newValue,oldValue){
                    console.log("new value ===>",newValue)
                    console.log("old value ===>",oldValue)
                    this.loadingWorkJob()
                },
                deep:true,
                immediate:false
            }
        }

    }
</script>

<style scoped>
    /*招聘页面,布局容器*/
    .recruitment-container{
        width: 100%;
        /*height: 300px;*/
        /*background-color: #Bfa;*/
        border: 1px solid transparent;
    }
    /*搜索容器*/
    .filter-search-container{
        width: 1300px;
        height: 240px;
        margin: 0 auto;
        margin-top: 10px;
        padding: 10px 30px 10px 30px;
        background-color: #F6F6F6;
    }
    /*职位信息表*/
    .recruitment-info-container{
        position: relative;
        width: 1360px;
        margin: 0 auto;
        background-color: #F6F6F6;
    }
    /*搜索框*/
    .searchInfo-common{
        margin-top: 20px;
        font-size: 14px;
        color: #999999;
    }
    .searchInfo-common span{
        /*background-color: indianred;*/
        display: inline-block;
    }
    /*搜索条*/
    .search-condition{
        width: 60px;
        height: 24px;
        line-height: 24px;
        margin-right: 40px;
        margin-left: 20px;
    }
    /*职位信息*/
    .common-search-info{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        margin-left: 5px;
        text-align: center;
    }
    .common-search-info:hover{
        background: #Bfa;
    }
    /*更多的筛选*/
    .searchInfo-common .more-filter{
        display: inline-block;
        margin-left: 10px;
    }
    /*职位导航容器*/
    .job-nav-container{
        width: 1360px;
        background-color: #ffffff;
        margin: 0 auto;
        margin-top: 10px;
    }
    /*左侧招聘信息栏目*/
    .recruitment-left-div{
        width: 70%;
        height: 800px;
        border: 1px solid transparent;
        background-color: #ffffff;
        margin-top: 10px;
    }
    .recruitment-left-div ul  li{
        position: relative;
        padding-left:0 ;
        list-style: none;
        width: 100%;
        height: 130px;
        /*background-color: #99a9bf;*/
        margin-top: 1px;
        margin-left: -20px;
        border:1px solid #F8F8F8;
    }
    /*公司信息 使用了定位*/
    .company_position{
        position: absolute;
        top: 18px;
        left: 400px;
        font-size: 13px;
    }
    /*天数 使用了定位*/
    .daytime_position{
        position: absolute;
        top: 18px;
        left: 850px;
        font-size: 13px;
    }
    /*职位申请按钮，使用了定位*/
    .apply_btn_position{
        position: absolute;
        top: 50px;
        left: 790px;
    }
    .scale_position{
        position: absolute;
        top: 66px;
        left: 400px;
        font-size: 13px;
        color: #999999;
    }
    /*底部分页条目样式*/
    .page-cut{
        width: 100%;
        height: 90px;
        line-height: 90px;
        text-align: center;
    }
    /*招聘信息右侧*/
    /*右侧边栏*/
    .recruitment-right-div{
        position: absolute;
        top: 0px;
        left: 966px;
        width: 29%;
        /*height: 300px;*/
        border: 1px solid black;
        background-color: #fff;

    }
    /*清除浮动*/
    .clearfix:before,
    .clearfix:after{
        content:"";
        display:table;
    }



    /*这个盒子里面的内容还没有想好些什么*/
    .recruitment-img-box{
        position: absolute;
        /*border: 1px solid red;*/
        width: 100%;
        height: 300px;
        background-color: #FF7011;
    }
    /*推荐职位容器的样式*/
    .recommend-job-info-box{
        position: absolute;
        top: 310px;
        width: 100%;
        height: 490px;
        background-color: #fff;
    }
    /*设置推荐职位的样式*/
    .recommend-position-title{
        width: 95%;
        height: 50px;
        line-height: 50px;
        padding-left: 5%;
        /*border-bottom:1px solid #C0C4CC ;*/
    }

    .recommend-position-info-box{
        margin-top: 10px;
        width: 100%;
        height: 430px;
        /*background-color: #FF7011;*/
    }

    /**/
    .position-recommend-info{
        width: 100%;
        height: 100px;
        margin: 10px;
        border-bottom: 1px solid #eeeeee;
        /*background-color: antiquewhite;*/
    }
</style>
